<template>
  <div class="crisis-game">
    <div class="game-header">
      <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
      <div class="game-title">
        <h1>🚨 危机处理专家</h1>
        <p>在危机中做出正确决策，挽救公司声誉和业绩</p>
      </div>
      <div class="stats">
        <el-tag type="danger">危机等级: {{ crisisLevel }}</el-tag>
        <el-tag type="warning">公司声誉: {{ reputation }}%</el-tag>
        <el-tag type="success">得分: {{ score }}</el-tag>
      </div>
    </div>

    <div class="game-container">
      <div v-if="status === 'ready'" class="start-screen">
        <el-card class="start-card">
          <el-icon class="icon"><WarningFilled /></el-icon>
          <h2>危机处理专家</h2>
          <p>作为公司的危机公关负责人，你需要应对各种突发危机，做出最佳决策</p>
          <div class="rules">
            <h3>游戏规则</h3>
            <ul>
              <li>🚨 应对5个不同类型的企业危机场景</li>
              <li>📊 每个决策会影响公司声誉、财务和员工士气</li>
              <li>⏰ 部分危机需要在限定时间内处理</li>
              <li>🎯 目标：保持声誉在60%以上，完成所有危机处理</li>
            </ul>
          </div>
          <el-button type="danger" size="large" @click="startGame">开始处理危机</el-button>
        </el-card>
      </div>

      <div v-if="status === 'playing'" class="playing-screen">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-card class="crisis-card">
              <template #header>
                <div class="crisis-header">
                  <h3>{{ currentCrisis.icon }} {{ currentCrisis.title }}</h3>
                  <el-tag :type="currentCrisis.severity">{{ currentCrisis.type }}</el-tag>
                </div>
              </template>
              
              <div class="crisis-content">
                <div class="situation">
                  <h4>📢 危机情况</h4>
                  <p>{{ currentCrisis.situation }}</p>
                </div>

                <div class="impact">
                  <h4>⚠️ 潜在影响</h4>
                  <div class="impact-tags">
                    <el-tag v-for="impact in currentCrisis.impacts" :key="impact" type="warning" size="small">
                      {{ impact }}
                    </el-tag>
                  </div>
                </div>

                <div class="decisions">
                  <h4>🎯 你的决策</h4>
                  <div class="decision-options">
                    <div 
                      v-for="(option, index) in currentCrisis.options" 
                      :key="index"
                      class="option-card"
                      :class="{ selected: selectedOption === index }"
                      @click="selectedOption = index"
                    >
                      <div class="option-header">
                        <strong>方案 {{ index + 1 }}</strong>
                        <el-icon v-if="selectedOption === index"><CircleCheck /></el-icon>
                      </div>
                      <p>{{ option.description }}</p>
                      <div class="option-effects">
                        <span v-if="option.effects.reputation" :class="option.effects.reputation > 0 ? 'positive' : 'negative'">
                          声誉 {{ option.effects.reputation > 0 ? '+' : '' }}{{ option.effects.reputation }}
                        </span>
                        <span v-if="option.effects.finance" :class="option.effects.finance > 0 ? 'positive' : 'negative'">
                          财务 {{ option.effects.finance > 0 ? '+' : '' }}{{ option.effects.finance }}
                        </span>
                        <span v-if="option.effects.morale" :class="option.effects.morale > 0 ? 'positive' : 'negative'">
                          士气 {{ option.effects.morale > 0 ? '+' : '' }}{{ option.effects.morale }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                <el-button 
                  type="danger" 
                  size="large" 
                  :disabled="selectedOption === null"
                  @click="makeDecision"
                  block
                >
                  执行决策
                </el-button>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="status-panel">
              <h3>📊 公司状态</h3>
              <div class="status-item">
                <span>声誉值</span>
                <el-progress :percentage="reputation" :color="reputation > 60 ? '#67c23a' : '#f56c6c'" />
              </div>
              <div class="status-item">
                <span>财务状况</span>
                <el-progress :percentage="finance" :color="finance > 50 ? '#67c23a' : '#e6a23c'" />
              </div>
              <div class="status-item">
                <span>员工士气</span>
                <el-progress :percentage="morale" :color="morale > 60 ? '#67c23a' : '#e6a23c'" />
              </div>
            </el-card>

            <el-card class="progress-panel">
              <h3>🎯 处理进度</h3>
              <div class="crisis-progress">
                已处理: {{ completedCrises }} / 5
              </div>
              <el-progress :percentage="(completedCrises / 5) * 100" :show-text="false" />
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div v-if="status === 'finished'" class="finish-screen">
        <el-card class="finish-card">
          <el-icon class="finish-icon" :class="finalGrade"><Trophy /></el-icon>
          <h2>危机处理完成！</h2>
          <div class="grade" :class="finalGrade">{{ finalGrade }} 级危机处理专家</div>
          <p>{{ gradeText }}</p>
          <div class="final-stats">
            <div class="stat"><span>最终声誉</span><strong>{{ reputation }}%</strong></div>
            <div class="stat"><span>财务状况</span><strong>{{ finance }}%</strong></div>
            <div class="stat"><span>员工士气</span><strong>{{ morale }}%</strong></div>
            <div class="stat"><span>总得分</span><strong>{{ score }}</strong></div>
          </div>
          <div class="actions">
            <el-button type="danger" size="large" @click="restartGame">再玩一次</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, WarningFilled, CircleCheck, Trophy } from '@element-plus/icons-vue'

const router = useRouter()
const status = ref('ready')
const selectedOption = ref(null)
const currentCrisisIndex = ref(0)
const completedCrises = ref(0)
const reputation = ref(80)
const finance = ref(70)
const morale = ref(75)
const score = ref(0)

const crises = [
  {
    id: 1,
    icon: '🔥',
    title: '产品质量危机',
    type: '产品危机',
    severity: 'danger',
    situation: '有消费者在社交媒体上曝光产品存在安全隐患，引发大量转发和关注，可能影响品牌形象和销量。',
    impacts: ['品牌声誉受损', '销量下降', '可能面临索赔'],
    options: [
      {
        description: '立即召回问题产品，公开道歉，提供全额退款和补偿',
        effects: { reputation: -10, finance: -15, morale: -5 },
        result: '果断的态度赢得了部分信任，但成本较高'
      },
      {
        description: '发布声明否认问题，等待调查结果',
        effects: { reputation: -20, finance: 0, morale: -10 },
        result: '消费者不满情绪加剧，危机升级'
      },
      {
        description: '主动联系消费者沟通，同步进行内部调查，承诺整改',
        effects: { reputation: -5, finance: -8, morale: 5 },
        result: '积极态度获得认可，及时控制了局面'
      }
    ]
  },
  {
    id: 2,
    icon: '💼',
    title: '高管丑闻',
    type: '管理危机',
    severity: 'danger',
    situation: '公司高管被曝出利益输送和贪腐行为，媒体大量报道，员工士气受挫，投资者信心动摇。',
    impacts: ['股价下跌', '员工信任危机', '监管调查'],
    options: [
      {
        description: '立即解除涉事高管职务，配合调查，建立新的监督机制',
        effects: { reputation: -8, finance: -10, morale: 10 },
        result: '强硬态度展现了公司治理决心'
      },
      {
        description: '内部处理，淡化影响，继续运营',
        effects: { reputation: -25, finance: -5, morale: -20 },
        result: '遮掩行为引发更大质疑'
      },
      {
        description: '暂停涉事高管职务，请第三方调查，定期公布进展',
        effects: { reputation: -5, finance: -8, morale: 5 },
        result: '透明处理获得各方认可'
      }
    ]
  },
  {
    id: 3,
    icon: '🔒',
    title: '数据泄露事件',
    type: '安全危机',
    severity: 'danger',
    situation: '黑客攻击导致大量用户数据泄露，包括个人信息和交易记录，用户恐慌，媒体关注。',
    impacts: ['用户流失', '法律诉讼', '监管处罚'],
    options: [
      {
        description: '立即通知所有用户，免费提供信用监控服务，升级安全系统',
        effects: { reputation: -12, finance: -20, morale: -5 },
        result: '主动担责虽然成本高，但保住了用户信任'
      },
      {
        description: '隐瞒事件，悄悄修复漏洞',
        effects: { reputation: -30, finance: -5, morale: -15 },
        result: '事件曝光后危机升级，面临更严重后果'
      },
      {
        description: '及时公告，配合调查，承诺赔偿，加强安全措施',
        effects: { reputation: -8, finance: -15, morale: 0 },
        result: '快速响应和补救措施控制了损失'
      }
    ]
  },
  {
    id: 4,
    icon: '👥',
    title: '大规模裁员风波',
    type: '人事危机',
    severity: 'warning',
    situation: '公司因业绩压力需要裁员30%，消息提前泄露，员工恐慌，媒体质疑公司经营能力。',
    impacts: ['员工士气低落', '人才流失', '社会舆论压力'],
    options: [
      {
        description: '提供优厚补偿，帮助转岗，公开透明沟通',
        effects: { reputation: 5, finance: -18, morale: -10 },
        result: '人性化处理获得理解，降低了负面影响'
      },
      {
        description: '按劳动法最低标准赔偿，快速执行',
        effects: { reputation: -15, finance: -8, morale: -25 },
        result: '引发员工反弹和媒体批评'
      },
      {
        description: '分批裁员，提供培训和转岗机会，保留核心人才',
        effects: { reputation: 0, finance: -12, morale: -5 },
        result: '妥善安排减轻了冲击'
      }
    ]
  },
  {
    id: 5,
    icon: '🌍',
    title: '环境污染指控',
    type: '环保危机',
    severity: 'danger',
    situation: '环保组织指控公司生产过程造成严重污染，提供了视频证据，引发公众抗议和媒体围堵。',
    impacts: ['政府调查', '业务停产', '品牌形象受损'],
    options: [
      {
        description: '立即停产整改，聘请专家治理，公开整改进度',
        effects: { reputation: -5, finance: -25, morale: -10 },
        result: '主动整改虽影响短期业绩，但树立了负责任形象'
      },
      {
        description: '发布声明反驳，质疑证据真实性',
        effects: { reputation: -25, finance: -5, morale: -20 },
        result: '对抗态度激化矛盾，失去公信力'
      },
      {
        description: '承认问题，提出分阶段整改方案，引入第三方监督',
        effects: { reputation: -8, finance: -18, morale: -5 },
        result: '务实态度和具体措施获得认可'
      }
    ]
  }
]

const currentCrisis = computed(() => crises[currentCrisisIndex.value])
const crisisLevel = computed(() => {
  if (reputation.value < 40) return '严重'
  if (reputation.value < 60) return '警戒'
  return '可控'
})

const finalGrade = computed(() => {
  if (reputation.value >= 70 && score.value >= 400) return 'S'
  if (reputation.value >= 60 && score.value >= 300) return 'A'
  if (reputation.value >= 50) return 'B'
  if (reputation.value >= 40) return 'C'
  return 'D'
})

const gradeText = computed(() => {
  const texts = {
    S: '卓越！你是出色的危机处理专家！',
    A: '优秀！你成功化解了大部分危机！',
    B: '良好！基本控制住了局面。',
    C: '及格！公司勉强度过了危机。',
    D: '糟糕！公司陷入严重困境。'
  }
  return texts[finalGrade.value]
})

const startGame = () => {
  status.value = 'playing'
  ElMessage.warning('危机来袭！保持冷静，做出明智决策！')
}

const makeDecision = () => {
  const option = currentCrisis.value.options[selectedOption.value]
  
  reputation.value = Math.max(0, Math.min(100, reputation.value + option.effects.reputation))
  finance.value = Math.max(0, Math.min(100, finance.value + option.effects.finance))
  morale.value = Math.max(0, Math.min(100, morale.value + option.effects.morale))
  
  const decisionScore = 100 + option.effects.reputation * 2 + option.effects.finance + option.effects.morale
  score.value += Math.max(0, decisionScore)
  
  ElMessage({
    message: option.result,
    type: option.effects.reputation >= -10 ? 'success' : 'warning',
    duration: 3000
  })
  
  completedCrises.value++
  selectedOption.value = null
  
  if (reputation.value <= 20) {
    ElMessage.error('公司声誉跌至谷底，游戏结束！')
    status.value = 'finished'
    return
  }
  
  setTimeout(() => {
    if (currentCrisisIndex.value < crises.length - 1) {
      currentCrisisIndex.value++
    } else {
      status.value = 'finished'
      ElMessage.success('所有危机处理完毕！')
    }
  }, 1500)
}

const restartGame = () => {
  status.value = 'ready'
  currentCrisisIndex.value = 0
  completedCrises.value = 0
  selectedOption.value = null
  reputation.value = 80
  finance.value = 70
  morale.value = 75
  score.value = 0
}

const goBack = () => router.push('/learning/games')
</script>

<style scoped>
.crisis-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #f56c6c 0%, #ef5350 100%);
  padding: 20px;
}

.game-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.stats {
  display: flex;
  gap: 10px;
}

.start-screen,
.finish-screen {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card,
.finish-card {
  max-width: 600px;
  text-align: center;
  padding: 40px;
}

.icon {
  font-size: 80px;
  color: #f56c6c;
  margin-bottom: 20px;
}

.start-card h2,
.finish-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0 30px;
}

.rules h3 {
  margin: 0 0 15px 0;
}

.rules ul {
  margin: 0;
  padding-left: 20px;
}

.rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.crisis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crisis-header h3 {
  margin: 0;
  font-size: 18px;
}

.crisis-content h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #303133;
}

.situation,
.impact,
.decisions {
  margin-bottom: 30px;
}

.situation p {
  line-height: 1.8;
  color: #606266;
}

.impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.decision-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.option-card {
  padding: 20px;
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-card:hover {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-card.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.option-card p {
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: #606266;
}

.option-effects {
  display: flex;
  gap: 15px;
  font-size: 14px;
}

.option-effects .positive {
  color: #67c23a;
}

.option-effects .negative {
  color: #f56c6c;
}

.status-panel h3,
.progress-panel h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
}

.status-item {
  margin-bottom: 20px;
}

.status-item span {
  display: block;
  margin-bottom: 8px;
  color: #606266;
}

.progress-panel {
  margin-top: 20px;
}

.crisis-progress {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.S,
.finish-icon.A {
  color: #f59e0b;
}

.grade {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.grade.S {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.grade.A {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.finish-card p {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.stat {
  background: linear-gradient(135deg, #f56c6c 0%, #ef5350 100%);
  padding: 20px;
  border-radius: 12px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat span {
  font-size: 14px;
  opacity: 0.9;
}

.stat strong {
  font-size: 24px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}
</style>

